<template>
  <div v-title data-title="信用卡">
    <top-filter ref="filter" :filterConditions="filterConditions" :activeConditions="stateConditions"
                @updateFilter="updateFilter" @filterList="filterList" :argList="argList"></top-filter>
    <div class="pagination-container">
      <div class="loading-container" v-show="!creditCardList.length && loaddingList">
        <loading></loading>
      </div>
      <no-data v-show="!creditCardList.length && !loaddingList"></no-data>
      <bs-pagination ref="scroll"
                     @refreshList="getList"
                     class="scroll"
                     :totalPage="totalPage"
                     :loading="loaddingList"
                     :currentPage="currentPage">
        <credit-card :productList="creditCardList"></credit-card>
      </bs-pagination>
    </div>
  </div>
</template>
<script>
  import BsPagination from '@/components/bsPagination'
  import CreditCard from '@/components/CreditCard'
  import TopFilter from '@/components/filter'
  import Loading from '@/components/loading/loading'
  import {httpReq} from '@/common/api'
  import {mapState, mapMutations} from 'vuex'
  import NoData from '@/components/noData.vue'
  export default {
    name: 'freecard',
    data() {
      return {
        argList: [ 'applicablePeople','channelId',  'creditcardType','creditcardLabel'],
        activeConditions: [],//当前选中的选项
        filterConditions: {},//筛选项
        creditCardList: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        loaddingList: true,//加载列表
      }
    },
    computed: {
      totalPage() {
        return Math.ceil(this.total / this.pageSize)
      },

      ...mapState({
        stateConditions: 'conditions'
      }),
    },
    components: {
      BsPagination,
      CreditCard,
      Loading,
      TopFilter,
      NoData
    },
    methods: {
      ...mapMutations([
        'changeConditions'
      ]),
      updateFilter(activeConditions) {
        this.changeConditions(activeConditions)
      },
      filterList(conditions) {
        this.conditions = conditions;
        this.getList()
      },
      getList(currentPage = 1) {
        if (currentPage === 1) {
          this.loaddingList = true;
          this.creditCardList = [];
        }
        this.currentPage = currentPage;
        const commonParams = {
          pageSize: this.pageSize,
          pageNum: currentPage
        };
        const params = Object.assign({}, commonParams, this.conditions);
        httpReq('GET', '/list/as/app/financial/creditcard/list', params).then((res) => {
          this.creditCardList = this.creditCardList.concat(res.rows);
          this.total = res.total;
          setTimeout(() => {
            this.$refs.scroll.refresh();
            this.$refs.scroll.finishPullUp()
          }, 20);
          this.loaddingList = false
        }).catch((err) => {
          this.$toast(err);
          this.loaddingList = false
        })
      },
      getFilterConditions() {
        httpReq('GET', '/list/as/app/financial/creditcard/condition').then((res) => {
          this.filterConditions = res;
          if (!this.isEmpty(this.stateConditions)) {
            this.$refs.filter.filterSelected(this.stateConditions[0])
          } else {
            this.getList();
          }
        }).catch(() => {
          this.getList();
        })
      },

    },
    created() {
      this.getFilterConditions();
    }
  }
</script>
<style lang="stylus" scoped>
  .pagination-container
    position absolute
    top: .9rem
    left: 0
    bottom: 0
    right: 0
    overflow: hidden
    padding-bottom .48rem
    box-sizing border-box
    .loading-container
      position: absolute
      width 100%
      top: 50%
      transform: translateY(-50%)
    .scroll
      margin-top .24rem
      position relative
      box-sizing border-box

</style>
